﻿﻿﻿var CPUXYS = [
{X: 0 , Y: -22},
{X: 0 , Y: -22},
{X: 9 , Y: -20},
{X: 16 , Y: -16},
{X: 21 , Y: -9},
{X: 23 , Y: 0},
{X: 21 , Y: 9},
{X: 16 , Y: 16},
{X: 9 , Y: 21},
{X: 0 , Y: 23},
{X: -9 , Y: 20},
{X: -16 , Y: 16},
{X: -21 , Y: 8},
{X: -22 , Y: 0},
{X: -21 , Y: -9},
{X: -15 , Y: -16},
{X: -8 , Y: -21}
]
var canvas = null;//全局变量 画布这个dom 绑定事件用
var context = null;//全局变量 画布这个对象 画东西用
// 	保存画布上所有的对象
var circles = [];
// 	画布原有的对象
var oldCircles = [];
//	画布上的线的对象
var lineObjs = [];
//	画布上所有的图片
var imgs = [];
//鼠标点击 如果选中一个元素 这个就是选中的那个元素
var previousSelectedCircle;
//选中的元素的初始位置
var chooseObjInitPlace = {};
// 这时需要判断有没有连线连在这个元素上
var dragLines1 = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines2 = [];
//是否在拖拽
var isDragging = false;
//鼠标放开了 判断一下落点是否有元素 如果有元素 拖动的元素归位 并且连线
var lineObj = null;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的开始的元素
var previousSelectedCircleStartLine;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的结束的元素
var previousSelectedCircleEndLine;
// 画布上所有的一级
var canvasAllLevel1 = [];
// 画布上同排元素统一高度
var canvasCurObjs=[];
// 画布上所有的二级
var canvasAllLevel2 = [];
// 画布上所有的三级
var canvasAllLevel3 = [];
//画布类型 如果是1 代表一级为主机 二级为板卡 如果是2 代表一级为板卡 二级为处理单元
var canvasType = 1;
//拖拽的那个元素是否是初始化中的元素
var canvasIsInitDom = true;
//拖拽的元素的级别
var canvasTuoLevel = 0;
//拖拽二级元素的时候 记录二级元素原始位置
var canvasAllLevel2OldObj = null;
var levelType=0;
var rightClickObj;

var moveAllObjs = {};//拖动的时候跟随的元素 最后要画这个东西 让这个东西在最上面
/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 *	type : 画布类型
 *	fun1 : 连线时候的回调
 *	fun2 : 断开连线时候的回调
 * 	fun3 : 双击连线的时候回调
 *	fun4 : 双击图标的时候回调
 **/
var canvasInitData = {};
/**调试demo**/
var table_box_scroll_top = 0;//滚动条滚动的高度
/**调试demo**/
function init_canvas(data ,type , fun1 , fun2,fun3,fun4,fun5){
    canvasType = type;
    $(".table-box").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    var funObj = {fun1:fun1,fun2:fun2,fun3:fun3,fun4:fun4,fun5:fun5};
    $(canvas).bind('mousedown', canvasClick);
    $(canvas).bind('click', canvasMouseClick);
    $(canvas).bind('mousedown', canvasLevelNClick);
    $(canvas).bind('mouseup' , funObj , outMouseDragging);
    //$(canvas).bind('mouseout' , funObj , outMouseDragging);
    $(canvas).bind('mousemove' , dragCircle);
    $(canvas).bind('dblclick' , funObj , canvasDbClick);
    $(canvas).bind('dblclick' , funObj , appDbClick);
    canvasInitData.data = data;
    canvasInitData.fun1 = fun1;
    canvasInitData.fun2 = fun2;
	/**调试demo**/
	$(".table-box").scroll(function() {
	table_box_scroll_top = $(".table-box").scrollTop();
	var initData = new Array();
	for(var i = 0 ; i < circlesData2.length ; i++){
		var obj = circlesData2[i];
		var newObj = {};
		newObj.x = obj.x;
		newObj.y = obj.y + table_box_scroll_top;
		newObj.width = obj.width;
		newObj.height = obj.height;
		newObj.img = obj.img;
		newObj.level = obj.level;
		newObj.text = obj.text;
		initData.push(newObj);
	}
	circles = initData;
	drawCircles();
	/**调试demo**/
	});
    if(canvasType == 1){
        //一级为主机
        var initData = new Array();
        for(var i = 0 ; i < circlesData1.length ; i++){
            var obj = circlesData1[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y+ table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            initData.push(newObj);
        }
        circles = initData;
    }else if(canvasType == 2){
        //一级为板卡
        var initData = new Array();
        for(var i = 0 ; i < circlesData2.length ; i++){
            var obj = circlesData2[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y+ table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            newObj.cpuType=obj.cpuType;
            initData.push(newObj);
        }
        circles = initData;
    }else if(canvasType == 3){
        //一级为板卡
        var initData = new Array();
        for(var i = 0 ; i < circlesData3.length ; i++){
            var obj = circlesData3[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y+ table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            newObj.imgId=obj.imgId;
            initData.push(newObj);
        }
        circles = initData;
    }
    drawCircles();
}

/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 遍历所有一级 还有title和count
    for(var i=0; i<canvasAllLevel1.length; i++) {
        var circle = canvasAllLevel1[i];
        // 绘制对象
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.fillStyle = "#FFFFFF";
        context.strokeStyle = "#FFFFFF";
        context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;
        drawOneImage(circle.img , circle.x, circle.y+40,circle.width , circle.height);
        if(circle.text != null){
            drawOneFont(circle);
        }
        context.fill();
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        context.lineWidth = 0.5;
        drawOneImage('../images/board.png', circle.x+25, circle.y+20,10 , 10, null);
        if(circle.title!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        if(levelType==1){
            context.strokeStyle = "#FFFFFF";
        }else{
            context.strokeStyle = "#FFFFFF";
        }
        
        context.stroke();
        
        context.beginPath();
        context.fillStyle = "#eeeeee";
        context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
        context.shadowBlur =0;
        doLine3(circle.x+20,circle.y+50,circle.x+circle.width-15,circle.y+50);
        context.stroke();
    }
    
    // 遍历所有二级
    for(var i=0; i<canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        // 绘制对象
        context.beginPath();

        context.fillStyle = circle.color;
        context.fillStyle = "#eeeeee";
        context.strokeStyle = "#FFFFFF";
       /* context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;*/
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);

        context.fill();
        if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect2(circle);
        }
        if(levelType==2){
            context.strokeStyle = "#FFFFFF";
        }else{
            context.strokeStyle = "#FFFFFF";
        }
        context.stroke();
    }

    // 遍历所有三级
    for(var i=0; i<canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        context.fillStyle = "#eeeeee";
        context.strokeStyle = "black";
        context.fill();
        if(levelType==3){
            context.strokeStyle = circle.color;
        }else{
            context.strokeStyle = "#FFFFFF";
        }
        context.stroke();
    }
    // 遍历所有框
    for(var i=0; i<canvasAllLevelObj.length; i++) {
    	 var circle = canvasAllLevelObj[i];
         // 绘制对象
         context.beginPath();
         context.lineWidth = 1;
         context.setLineDash([1,0]);
         if(circle.color){
             context.strokeStyle = circle.color;
         }else{
             context.strokeStyle = '#eeeeee';
         }
         context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
         context.stroke();
    }
    //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2 , lineObj.count , context);
    }
    //十字画线的时候 执行画线
    if(drawLineObj != null && drawLineObj.startx!=null){
        DrawLine2(drawLineObj , context);
    }
    
    // 遍历所有对象
    for(var i=0; i<circles.length; i++) {
        var circle = circles[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
        }else if(circle.text != null){
            drawOneFont(circle);
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        context.fill();
        context.stroke();
    }
    
    
    //最后查看 是否有拖拽 有拖拽 最后再画一下拖拽的元素
    if(moveAllObjs.isDrag){
    	if(moveAllObjs.isChooseLevel2){
    		//选中的是二级元素 或者 初始元素
    		var circle = moveAllObjs;
            // 绘制对象
            context.beginPath();
            if(circle.img != null){
                drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
                context.fillStyle = "#eeeeee";
                context.strokeStyle = "black";
            }else if(circle.text != null){
                drawOneFont(circle);
            }else{
                context.fillStyle = "#eeeeee";
                context.strokeStyle = "black";
                context.rect(circle.x,circle.y ,circle.width , circle.height);
            }
            context.fill();
            context.stroke();
    	}else{
    		//选中一级元素  下面还有二级元素
    		var circle = moveAllObjs;
            // 绘制对象
            context.beginPath();
            context.fillStyle = "#eeeeee";
            context.fillStyle = "#FFFFFF";
            context.strokeStyle = "#FFFFFF";
            context.shadowColor = "#EEEFF1";
            context.shadowBlur =10;
            drawOneImage(circle.img , circle.x, circle.y+40,circle.width , circle.height);
            if(circle.text != null){
                drawOneFont(circle);
            }
            context.fill();
            context.fillRect(circle.x,circle.y ,circle.width , circle.height);
            context.lineWidth = 0.5;
            if(circle.title!=null) {
                context.fillStyle = "#eeeeee";
                context.strokeStyle = "black";
                drawOneRect(circle);
            }
            if(levelType==1){
                context.strokeStyle = circle.color;
            }else{
                context.strokeStyle = "#FFFFFF";
            }
            if(moveAllObjs.level2Objs != null){
            	for(var i = 0 ; i < moveAllObjs.level2Objs.length ; i++){
            		var circle = moveAllObjs.level2Objs[i];
            		// 绘制对象
            		context.beginPath();
            		context.fillStyle = circle.color;
            		context.fillStyle = "#eeeeee";
            		context.strokeStyle = "#FFFFFF";
            		context.shadowColor = "#EEEFF1";
            		context.shadowBlur =10;
            		context.fillRect(circle.x,circle.y ,circle.width , circle.height);
            		drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
            		
            		context.fill();
            		if(circle.text != null){
            			drawOneFont(circle);
            			//绘制
            		}else{
            			context.rect(circle.x,circle.y ,circle.width , circle.height);
            		}
            		if(levelType==2){
            			context.strokeStyle = circle.color;
            		}else{
            			context.strokeStyle = "#FFFFFF";
            		}
            	}
            }
            context.stroke();
    	}
    }
}

/**
 *右键菜单
 */
function canvasLevelNClick(e){
    var type=e.which;
    if(type!=3){
        return false;
    }else{
        // 取得画布上被单击的点
        var clickX = e.pageX - canvas.offsetLeft-320;
        var clickY = e.pageY - canvas.offsetTop-70+table_box_scroll_top;
        // 查找被单击的對象
        for(var i = 0 ; i < canvasAllLevel2.length; i++) {
            var circle = canvasAllLevel2[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
            	cancelChoose();
            	$(".lineMenu").hide();
                $(".rightKey").css({left:(345+clickX)+"px",top:(50+clickY-table_box_scroll_top)+"px"});
                $(".rightKey").show();
                rightClickObj = canvasAllLevel2[i];
                e.stopPropagation();
                return  false;
            }
        }
        for(var i = 0 ; i < canvasAllLevel1.length; i++) {
            var circle = canvasAllLevel1[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
            	$(".lineMenu").hide();
                $(".rightKey").css({left:(345+clickX)+"px",top:(50+clickY-table_box_scroll_top)+"px"});
                $(".rightKey").show();
                rightClickObj = canvasAllLevel1[i];
                e.stopPropagation();
                return  false;
            }
        }
    }
}


/**
 *画布双击,查询是否点击的app
 */
function appDbClick(e){}

/**
 * 	画布双击 查询是否有点击的连线
 */
function canvasDbClick(e){}
/**画主机板卡横线*/
function doLine3(str1,str2,end1,end2){
    context.beginPath();
	context.moveTo (str1,str2);       //设置起点状态
	context.lineTo (end1,end2);       //设置末端状态
	context.lineWidth = 1;          //设置线宽状态
	context.strokeStyle ='#E8E9EB';  //设置线的颜色状态
	context.stroke(); 
}
/**
 *	画一个一级元素   需要带title count
 */
function drawOneRect(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);
    var curTile=circle.title;
    if(curTile.length>5){
    	curTile=curTile.substring(0,5)+'…';
    }
    
    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(curTile, circle.x+40, circle.y+30)

    var text = '';
    if(canvasType == 1 || canvasType == 3){
        text = circle.count +'个板卡';
    }else if(canvasType == 2){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 50, circle.y+30)

}
/**
 *	画一个二级元素   需要带title count
 */
function drawOneRect2(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "#009FE7";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title2, circle.x+30, circle.y+25)
}
/**
 *	写文字
 */
function drawOneFont(circle){
    //设置样式
    context.lineWidth = 2;
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#F5270B";
    context.fillText(circle.text, circle.x, circle.y)
}

/**
 *	画一张图片 这张图片如果是未加载的 等待加载后 加入到内存中
 */
function drawOneImage(imgSrc , x , y ,width, height,fun){
	if(imgSrc != null){
		if(imgs[imgSrc]==null){
			var img = new Image()
			img.src = imgSrc;
			img.onload = function(){
				imgs[imgSrc] = img;
				context.drawImage(img, x, y,width,height);
			}
		} else {
			context.drawImage(imgs[imgSrc], x, y,width,height);
		}
		if(fun){
			fun();
		}
	}
}
/**
 *	是鼠标单击
 */
var levelType = 0;
var canvasAllLevelObj = [];
function canvasMouseClick(e){
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70+table_box_scroll_top;
    var isCancelChoose = false;
    var isChooseOne = false;
    if(mouseInitX >= clickX-5 && mouseInitX <= clickX+5 && mouseInitY >= clickY-5&& mouseInitY <= clickY+5){
        //判断选中的是几级
        var isChooseOne = false;
        for(var i = 0 ; i < canvasAllLevel2.length; i++) {
            var circle = canvasAllLevel2[i];
            if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                //选中了这个元素
                levelType=2;
                if(!isCancelChoose){
                    addCanvasAllLevelObj(circle , i , 2);
                }
                drawCircles();
                isChooseOne = true;
                break;
            }
        }
        if(!isChooseOne){
            for(var i = 0 ; i < canvasAllLevel1.length; i++) {
                var circle = canvasAllLevel1[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    levelType=1;
                    $(".editPOP").hide();
                    
                    if(!isCancelChoose){
                        addCanvasAllLevelObj(circle , i , 1);
                    }
                    drawCircles();
                    break;
                }
            }
        }
    }

}
/**
 *	点击画布 查找有无选中的对象
 *
 */
var mouseInitX = 0;
var mouseInitY = 0;

var canvas2TuoLevel2 = {};//这个全局是用来代表 板卡-处理单元 拖拽处理单元的所有数据

function canvasClick(e) {
	
	if(e.which==3){
		return ;
	}
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70+table_box_scroll_top;

    mouseInitX = clickX;
    mouseInitY = clickY;
    // 查找被单击的對象
    var isChooseOneObj = false;
   // isClickBoolen=false;
    for(var i = 0 ; i < circles.length; i++) {
        var circle = circles[i];
        initDomPlace(circles , i);
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            canvasTuoLevel = previousSelectedCircle.level;
            canvasAllLevel2OldObj = null;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            isDragging = true;
            moveAllObjs = circle;
        	moveAllObjs.isChooseLevel2 = true;
            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            //停止搜索
            return;
        }else{
            previousSelectedCircle = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }
    /**
     * 如果拖拽是二级元素的话 和别的二级元素重合后互换位置 要不然放开后回到原点 
     */
    canvas2TuoLevel2.isChooseLevel2 = false;
    moveAllObjs.isChooseLevel2 = false;
    for(var i = 0 ; i < canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        initDomPlace(canvasAllLevel2 , i);
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
        	canvas2TuoLevel2.isChooseLevel2 = true;
        	moveAllObjs = circle;
        	moveAllObjs.isChooseLevel2 = true;
        	previousSelectedCircle = circle;
        	canvas2TuoLevel2.place = {};
        	canvas2TuoLevel2.place.x = circle.x;
        	canvas2TuoLevel2.place.y = circle.y;
        	canvas2TuoLevel2.pIndex = circle.pIndex;
        	canvas2TuoLevel2.id = circle.id;
        	canvas2TuoLevel2.oldIndex = circle.index;
        	canvas2TuoLevel2.index = i;
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            // 使对象允许拖拽
            isDragging = true;
            //更新显示
            drawCircles();
            //停止搜索
            break;
        }else{
            previousSelectedCircle = null;
            canvas2TuoLevel2.place = {};
        }
    }
    if(!canvas2TuoLevel2.isChooseLevel2){
    	/**
    	 * 如果拖拽是一级元素的话 和别的一级元素重合后互换位置 要不然放开后回到原点 然后 把这两个一级元素下的二级元素互换位置
    	 */
    	for(var i = 0 ; i < canvasAllLevel1.length; i++) {
    		var circle = canvasAllLevel1[i];
    		if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
    			initDomPlace(canvasAllLevel1 , i);
    			//选中了这个元素
    			isChooseOneObj = true;
    			if(circle.text !=null){
    				isChooseOneObj = false;
    			}
    		}
    		
    		// 判断这个点是否在对象中
    		if(isChooseOneObj){
    			// 清除之前选择的对象
    			previousSelectedCircle = circle;
    			
    			moveAllObjs = circle;
    			moveAllObjs.isDrag = true;
            	moveAllObjs.isChooseLevel2 = false;
    			canvasAllLevel2OldObj = {};
    			canvasAllLevel2OldObj.x = circle.x;
    			canvasAllLevel2OldObj.y = circle.y;
    			canvasAllLevel2OldObj.index = circle.index;
    			dragLines1 = [];
    			dragLines2 = [];
    			for(var i = 0 ; i < lineObjs.length ; i++){
    				var lineObj = lineObjs[i];
    				// 将对象移动到鼠标位置
    				if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
    					dragLines1.push(lineObj);
    				}else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
    					dragLines2.push(lineObj);
    				}
    			}
    			// 使对象允许拖拽
    			isDragging = true;
    			//更新显示
    			drawCircles();
    			chooseObjInitPlace.x = circle.x;
    			chooseObjInitPlace.y = circle.y;
    			chooseObjInitPlace.index = circle.index;
    			//停止搜索
    			break;
    		}else{
    			previousSelectedCircle = null;
    			canvasAllLevel2OldObj = null;
    			canvasTuoLevel = 0;
    			chooseObjInitPlace = {};
    		}
    	}
    }
}
/**
 *	点击画布的时候 记录一下原有元素的位置 用于连线
 *	是否需要记录点击元素的原有位置 暂未使用
 */
function initDomPlace(circles , index){
    oldCircles = new Array();
    for(var i = 0 ; i < circles.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = circles[i].x;
        circleObj.y = circles[i].y;
        circleObj.img = circles[i].img;
        circleObj.width = circles[i].width;
        circleObj.height = circles[i].height;
        circleObj.id = circles[i].id;
        if(circles[i].board!=null){
            circleObj.board = circles[i].board;
        }
        if(circles[i].cpu!=null){
            circleObj.cpu = circles[i].cpu;
        }
        if(circles[i].positionId!=null){
            circleObj.positionId = circles[i].positionId;
        }
        circleObj.index = circles[i].index;
        circleObj.pIndex = circles[i].pIndex;
        circleObj.oldIndex = i;
        oldCircles.push(circleObj);
    }
}

/**
 * 拖拽元素
 */
var canvasClickBoolean = false;
function dragCircle(e) {
	cancelChoose();
	moveAllObjs.isDrag = true;
	if(canvasClickBoolean){
        canvasClickBoolean = false;
        return;
    }
	var type=e.which;
    if(type==3){
    	canvasClickBoolean = false;
        return ;
    }
    // 判断对象是否开始拖拽
    if (isDragging == true) {
        // 判断拖拽对象是否存在
        if (previousSelectedCircle != null) {
            // 取得鼠标位置
            var clickX = e.pageX - canvas.offsetLeft-320;
            var clickY = e.pageY - canvas.offsetTop-70 +  table_box_scroll_top;
            // 将对象移动到鼠标位置
            previousSelectedCircle.x = clickX - previousSelectedCircle.width/2;
            previousSelectedCircle.y = clickY - previousSelectedCircle.height/2;
            for(var i = 0 ; i < dragLines1.length ; i++){
                dragLines1[i].obj1.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines1[i].obj1.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            for(var i = 0 ; i < dragLines2.length ; i++){
                dragLines2[i].obj2.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines2[i].obj2.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }

            // 这个一级元素下的二级元素 跟随这个一级元素运动(重新计算二级元素的位置就ok啊)
            if(!canvas2TuoLevel2.isChooseLevel2){
            	updateCanvasLevel2Obj(previousSelectedCircle);
            }
            // 更新画布
            drawCircles();
        }
    }
}
/**
 *	停止拖拽的时候触发的事件
 *	查看拖拽的元素 放开的时候 是否在某个一级中 如果在的话 触发事件 新增一个二级元素 并且在固定位置
 */
function outMouseDragging(e){
	if(e.which==3){
		return ;
	}
	moveAllObjs.isDrag = false;
    isDragging = false;
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70+table_box_scroll_top;
    var isChooseOneObj = false;
    var noLevel2 = false;
    var select2={};
    if(canvas2TuoLevel2.isChooseLevel2){
    	//拖拽的是CPU 如果和别的CPU重合 互换位置 更换pIndex
    	 for(var i = 0 ; i < oldCircles.length; i++) {
             var circle = oldCircles[i];
             if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                 //选中了这个元素
                 isChooseOneObj = true;
                 noLevel2 = true;
                 break;
             }
         }
    	// 判断这个点是否在对象中
         if(isChooseOneObj){
             //让拖拽的这个归位 并连线
             previousSelectedCircle.x  = circle.x;
             previousSelectedCircle.y  = circle.y;
             previousSelectedCircle.pIndex  = circle.pIndex;
             previousSelectedCircle.index  = circle.index;
             canvasAllLevel2[circle.oldIndex].x = canvas2TuoLevel2.place.x;
             canvasAllLevel2[circle.oldIndex].y = canvas2TuoLevel2.place.y;
             canvasAllLevel2[circle.oldIndex].pIndex = canvas2TuoLevel2.pIndex;
             canvasAllLevel2[circle.oldIndex].index = canvas2TuoLevel2.oldIndex;
             //更新显示
             if(e.data.fun5) {
             	if(previousSelectedCircle!==null&&circle!=null){
                     e.data.fun5(previousSelectedCircle , canvasAllLevel2[circle.oldIndex]);
             	}
             }
             previousSelectedCircle = null;
         	moveAllObjs = {};

             drawCircles();
             //停止搜索
             return;
         }else if(!noLevel2){
        	 noLevel2=true;
        	 for(var l2=0;l2<canvasAllLevel1.length;l2++){
        		var circle = canvasAllLevel1[l2];
             	if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                     //选中了这个元素
         		  previousSelectedCircle.cpu.boardId=circle.board.id;
                     if(e.data.fun5) {
                     	if(previousSelectedCircle!==null){
                             e.data.fun5(previousSelectedCircle ,null);
                     	}
                     }
                    break;
                 }
             }
             
            canvasAllLevel2OldObj=null;
         	var newLevle2=canvasAllLevel2;
         	canvasAllLevel2=[];
         	var newLevel1=canvasAllLevel1;
         	canvasAllLevel1=[];
             drawCircles();

         	for(var l1=0;l1<newLevel1.length;l1++){
         		 var circle = newLevel1[l1];
         		 var curLevel1=addCanvasLevel1(l1 , 0,circle.board);
         		 for(var l22=0;l22<newLevle2.length;l22++){
             		if(newLevle2[l22].cpu.boardId==newLevel1[l1].board.id){
                         addCanvasLevel2(curLevel1.index, e.data, newLevle2[l22].cpu);
             		}
             	}
         	}
         	 previousSelectedCircle = {};
              drawCircles();
              return;
        	 
         }else{
             previousSelectedCircle.x  = canvas2TuoLevel2.place.x;
             previousSelectedCircle.y  = canvas2TuoLevel2.place.y;
             canvas2TuoLevel2 = {};
         	moveAllObjs = {};

             canvas2TuoLevel2.isChooseLevel2 = false;
             drawCircles();
             return;
         }
    }
    if(canvasAllLevel2OldObj != null){
        //拖拽的是一级元素 如果有和别一级元素重合 互换位置 不然 重新回到原来的位置
        for(var i = 0 ; i < oldCircles.length; i++) {
            var circle = oldCircles[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
                isChooseOneObj = true;
                lineObj = circle;
                break;
            }
        }
        // 判断这个点是否在对象中
        if(isChooseOneObj){
            //让拖拽的这个归位 并连线
            previousSelectedCircle.x  = circle.x;
            previousSelectedCircle.y  = circle.y;
            canvasAllLevel1[circle.oldIndex].x = canvasAllLevel2OldObj.x;
            canvasAllLevel1[circle.oldIndex].y = canvasAllLevel2OldObj.y;
            //归位的时候 把其他连线也归位
            for(var i = 0 ; i < dragLines1.length ; i++){
                dragLines1[i].obj1.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines1[i].obj1.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            for(var i = 0 ; i < dragLines2.length ; i++){
                dragLines2[i].obj2.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines2[i].obj2.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            updateCanvasLevel2Obj(canvasAllLevel1[circle.oldIndex]);
            updateCanvasLevel2Obj(previousSelectedCircle);
            //doLine(previousSelectedCircle , lineObj , 0 ,e.data);
            //更新显示
           
            previousSelectedCircle = null;
        	moveAllObjs = {};

            drawCircles();
            //停止搜索
            return;
        }else{
            previousSelectedCircle.x  = canvasAllLevel2OldObj.x;
            previousSelectedCircle.y  = canvasAllLevel2OldObj.y;
            updateCanvasLevel2Obj(previousSelectedCircle);
        	moveAllObjs = {};

            drawCircles();
            lineObj = null;
        }
    }else {
        //停止拖拽	要归位
        if (canvasType == 1) {
            //一级为主机
            var initData = new Array();
            for (var i = 0; i < circlesData1.length; i++) {
                var obj = circlesData1[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y + table_box_scroll_top;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.imgId = obj.imgId;
                newObj.board = obj.board;
                initData.push(newObj);
            }
            circles = initData;
        } else if (canvasType == 2) {
            //一级为板卡
            var initData = new Array();
            for (var i = 0; i < circlesData2.length; i++) {
                var obj = circlesData2[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y + table_box_scroll_top;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.cpuType = obj.cpuType;
                newObj.cpu = obj.cpu;
                initData.push(newObj);
            }
            circles = initData;
        } else if (canvasType == 3) {
            //一级为板卡
            var initData = new Array();
            for (var i = 0; i < circlesData3.length; i++) {
                var obj = circlesData3[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.imgId = obj.imgId;
                initData.push(newObj);
            }
            circles = initData;
        }
        drawCircles();
        var isChooseOneObj = false;
        if (canvasTuoLevel == 1) {
            //一级
            if (previousSelectedCircle != null) {
            	$("#bottom3").hide();
            	$("#boardId").val('');
        		$("#boardName").val('');
        		$("#boardType").val('');
        		if(clickX <= canvas.offsetLeft + canvas.width-150){
        			$("#bottom4").show();
        			$(".editPOP").show();
        			newBoard(canvasAllLevel1.length, 0);
        		}
            	previousSelectedCircle=null;
            	previousSelectedCircle=null;
            	oldCircles=[];
            	moveAllObjs=[];
            	isChooseOneObj=false;
            }
        } else if (canvasTuoLevel == 2) {

            if (previousSelectedCircle == null) {
                return;
            }
            var img = previousSelectedCircle;
            var canvasAllHostIndex = -1; //第几个一级
            for (var i = 0; i < canvasAllLevel1.length; i++) {
                var circle = canvasAllLevel1[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    isChooseOneObj = true;
                    canvasAllHostIndex = circle.index;
                }
                // 判断这个点是否在对象中
                if (isChooseOneObj) {
                	dissave();
                	$("#bottom2").show();
            		$(".editPOP").show();
            		$("#bottom3").hide();
                    //新增一个二级元素 要根据type还有这个一级下有几个二级 计算位置
                	newCpus(canvasAllHostIndex, e.data, img.cpuType);
                	previousSelectedCircle=null;
                	oldCircles=[];
                	moveAllObjs=[];
                	isChooseOneObj=false;
                   // addCanvasLevel2(canvasAllHostIndex, e.data, img.cpuType);
                    //更新显示
                    drawCircles();
                    //停止搜索
                    return;
                } else {
                    lineObj = null;
                }
            }
        } else if (canvasTuoLevel == 3) {
            if (previousSelectedCircle == null) {
                return;
            }
            var canvasAllHostIndex = -1; //第几个二级
            var canvasAllHostPIndex = -1;//二级的父Index
            for (var i = 0; i < canvasAllLevel2.length; i++) {
                var circle = canvasAllLevel2[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    isChooseOneObj = true;
                    canvasAllHostPIndex = circle.pIndex;
                }
                // 判断这个点是否在对象中
                if (isChooseOneObj) {
                    //新增一个三级元素 要根据type还有这个二级下有几个三级 计算位置
                    addCanvasLevel3(i, canvasAllHostPIndex, e.data);
                    //更新显示
                    drawCircles();
                    //停止搜索
                    return;
                } else {
                    lineObj = null;
                }
            }
        }
    }
}

/**
 *	新增一个一级元素
 */
function addCanvasLevel1(index , count,funs){
    var title = '';
    var canvasAllLevel1Obj = {};
    canvasAllLevel1Obj.count = count;
    canvasAllLevel1Obj.board = funs;
    canvasAllLevel1Obj.index = canvasAllLevel1.length;

    canvasAllLevel1Obj.y = 80;
    if(canvasType == 1 || canvasType == 3){
        title = '主机'+index;
        canvasAllLevel1Obj.title = title;
        canvasAllLevel1Obj.width = 180;
        canvasAllLevel1Obj.height = 220;
        if(0<index%4<=3 && canvasAllLevel1[index-1].height>220){
            canvasAllLevel1Obj.height = canvasAllLevel1[index-1].height;

        }
        
        //主机-板卡 最多两个
        if(canvasAllLevel1.length >= 2){
            //最多有两个 不能继续增加了
            alert('有两个主机了!!')
            drawCircles();
            return ;
        }else if(canvasAllLevel1.length == 0){
            //可以增加 如果没有过主机 给他放第一个位置
            canvasAllLevel1Obj.x = 80;
        }else if(canvasAllLevel1.length == 1){
            //如果有一个主机 算一下第一个主机的宽度 给他放到第二个位置
            canvasAllLevel1Obj.x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 100);
        }
    }else if(canvasType == 2){
        title = '板卡'+index;
        if(funs.boardName){
        	title=funs.boardName;
        }
        canvasAllLevel1Obj.title = title;
        canvasAllLevel1Obj.width = 200;
        canvasAllLevel1Obj.height = 250;
        canvasAllLevel1Obj.level = canvasType;
        /*if(0<index%4<=3 && canvasAllLevel1[index-1].height>250){
            canvasAllLevel1Obj.height = canvasAllLevel1[index-1].height;

        }*/
        //板卡-处理单元 一排四个  可以有多个
        var objy = 50;
        var objx = 80;
        if(canvasAllLevel1.length > 3){
            //超过一排 计算 一下位置高度
            if(canvasAllLevel1.length % 4 == 0){
                //最后一个的高度 另起一排
                objy = canvasAllLevel1[canvasAllLevel1.length-1].y + canvasAllLevel1[canvasAllLevel1.length-1].height+30 ;
            }else{
                //最后一个的高度 应该是新增这个的高度
                objy = canvasAllLevel1[canvasAllLevel1.length-1].y;
                objx = canvasAllLevel1[canvasAllLevel1.length-1].x + 240;
            }
        }else{
            objx = objx + 240 * canvasAllLevel1.length;
        }
        canvasAllLevel1Obj.x = objx;
        canvasAllLevel1Obj.y = objy;
    }
    if(funs){
    	if(funs.id){
    		canvasAllLevel1Obj.id=funs.id;
    	}
    	if(funs.title){
    		canvasAllLevel1Obj.title=funs.title;
    	}
    }
    if(index<4){
		if(index-1>=0 && canvasAllLevel1[canvasAllLevel1.length-1].height>250){
			canvasAllLevel1Obj.height=canvasAllLevel1[canvasAllLevel1.length-1].height;
		}
	}
	if(index>=4){
		if(index%4==0){
			canvasAllLevel1Obj.y=canvasAllLevel1[canvasAllLevel1.length-4].y+canvasAllLevel1[canvasAllLevel1.length-4].height+30;
		}else if(index%4==1){
			canvasAllLevel1Obj.y=canvasAllLevel1[canvasAllLevel1.length-1].y;
			canvasAllLevel1Obj.height=canvasAllLevel1[canvasAllLevel1.length-1].height;
		}else if(index%4==2){
			canvasAllLevel1Obj.y=canvasAllLevel1[canvasAllLevel1.length-1].y;
			canvasAllLevel1Obj.height=canvasAllLevel1[canvasAllLevel1.length-1].height;
		}else if(index%4==3){
			canvasAllLevel1Obj.y=canvasAllLevel1[canvasAllLevel1.length-1].y;
			canvasAllLevel1Obj.height=canvasAllLevel1[canvasAllLevel1.length-1].height;
		}
	}
    canvasAllLevel1.push(canvasAllLevel1Obj);
    
   
	
	 var height = canvas.height;
	if(canvasAllLevel1Obj.y +canvasAllLevel1Obj.height+50> height){
		canvas.height = canvasAllLevel1Obj.y + canvasAllLevel1Obj.height+100;
	}
    drawCircles();
    return canvasAllLevel1Obj;
}
/**
 *	新增一个二级元素
 */
function addCanvasLevel2(index , funs , cpu){
    var canvasAllLevel2Obj = {};
    var typelevle=cpu.cpuType;
    canvasAllLevel2Obj.pIndex = index;
    canvasAllLevel2Obj.cpuType=cpu.cpuType;
    canvasAllLevel2Obj.cpu=cpu;
    
    for(var i = 0 ; i < canvasAllLevel1.length ; i++){
        var obj = canvasAllLevel1[i];
        if(obj.index == index){
            index = i;
        }
    }
    //计算各种位置
    //查看本一级下有几个二级
    if(canvasType == 1 || canvasType == 3){
      
    }else if(canvasType == 2){

        canvasAllLevel2Obj.width = 50;
        canvasAllLevel2Obj.height = 50;
       
        //	板卡-处理单元 一排两个 最多四个
        var myCount = 0;
        for(var i = 0 ; i < canvasAllLevel2.length ; i++){
            var canvasLevel2 = canvasAllLevel2[i];
            if(canvasLevel2.pIndex == index){
                //记录我这个主机下有多少个板卡
                myCount++;
            }
        }
        canvasAllLevel2Obj.index = myCount;
        if(myCount >= 8){
            //一个板卡中最多有四个处理单元
            alert('一个板卡最多8个处理单元');
            return;
        }else{
            canvasAllLevel1[index].count = myCount+1;

            //在我这个板卡中 有四个位置 看看是在哪个区域内
            if(myCount % 2 == 0){
                //另起一排 增加本主机的高度
                //canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
                canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 60 + 80*(myCount / 2);
                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30;
                if(myCount>3 && myCount/2==2  &&canvasAllLevel1[index].height<310){
                	canvasAllLevel1[index].height+=70;
                }else  if(myCount>5 && myCount/2==3  &&canvasAllLevel1[index].height<390){
                	canvasAllLevel1[index].height+=70;
                }
            }else{
                canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 60 + 80*((myCount -( myCount%2)) / 2);
                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30 + 88*(myCount%2);
            }
            //统一同排板卡的高度
            changHeight(myCount,index);
        }
    }
    if(typelevle!=null){
    	//匹配对应的CPU
        if(typelevle==1){
            canvasAllLevel2Obj.img='./images/topology/SW.png';
        }else if(typelevle==2){
            canvasAllLevel2Obj.img='./images/topology/FPGA.png';
        }else if(typelevle==3){
            canvasAllLevel2Obj.img='./images/topology/MSU2.png';
        }else if(typelevle==4){
            canvasAllLevel2Obj.img='./images/topology/DSP.png';
        }else if(typelevle==5){
            canvasAllLevel2Obj.img='./images/topology/ppc.png';
        }else if(typelevle==6){
            canvasAllLevel2Obj.img='./images/topology/ARM.png';
        }
    }
    
    if(funs){
    	if(funs.id){
    		canvasAllLevel2Obj.id=funs.id;
    	}
    	if(funs.title){
    		canvasAllLevel2Obj.title=funs.title;
    	}
    	if(funs.index){
    		canvasAllLevel2Obj.index=funs.index;
    	}
    	if(funs.param){
    		canvasAllLevel2Obj.param=funs.param;
    	}
    }
    if(cpu.cpuName!=null&&cpu.cpuName!=""&&!isNaN(cpu.cpuName)){
    	var cindex = cpu.cpuName * 1;
    	canvasAllLevel2Obj.index = cindex;
    }
    canvasAllLevel2Obj.x_=canvasAllLevel2Obj.x-canvasAllLevel1[index].x
    canvasAllLevel2Obj.y_=canvasAllLevel2Obj.y-canvasAllLevel1[index].y
    canvasAllLevel2.push(canvasAllLevel2Obj);
    //回调函数
    return canvasAllLevel2Obj;
}
//统一同排板卡的高度
function changHeight(myCount,index){
   	 //统一同排板卡的高度
   	//获取最大高度
       var maxHeight=canvasAllLevel1[index].height;
       //获得同排元素
       canvasCurObjs=[];
       for(var k=0;k<canvasAllLevel1.length;k++){
       	if(canvasAllLevel1[k].y==canvasAllLevel1[index].y){
       		canvasCurObjs.push(canvasAllLevel1[k]);
       		if(maxHeight<canvasAllLevel1[k].height){
           		maxHeight=canvasAllLevel1[k].height;
           	}
       	}
       	
       }
     //重置同排高度
       for(var k3=0;k3<canvasAllLevel1.length;k3++){
       	for(var k4=0;k4<canvasCurObjs.length;k4++){
       		if(canvasCurObjs[k4].board.id==canvasAllLevel1[k3].board.id){
       			canvasAllLevel1[k3].height=maxHeight;
   			}
       	}
       }
       //修改下面各排的位置
       if(myCount>3){
    	   var newcanvasAllLevel2 = canvasAllLevel2;
    	   var newcanvasAllLevel1 = canvasAllLevel1;
    	   if(index%4==3 && canvasAllLevel1[index+1]!=null){
    		   for(var c1=index+1;c1<canvasAllLevel1.length;c1++){
    			  if(myCount % 2 == 0){
        			   canvasAllLevel1[c1].y+=60;
    			   }
    			  // canvasAllLevel1[c1].y=canvasAllLevel1[c1-4].y+canvasAllLevel1[c1-4].height+40;
    			   for(var c2=0;c2<canvasAllLevel2.length;c2++){
    			   if(canvasAllLevel2[c2].cpu.boardId==canvasAllLevel1[c1].id){
    				   canvasAllLevel2[c2].y=canvasAllLevel1[c1].y+canvasAllLevel2[c2].y_;
    			   }
        		   }
    		   }
    		  
    	   }
    	   if(index%4==2 && canvasAllLevel1[index+2]!=null){
    		   for(var c1=index+2;c1<canvasAllLevel1.length;c1++){
    			   if(myCount % 2 == 0){
        			   canvasAllLevel1[c1].y+=60;
    			   }
    			  // canvasAllLevel1[c1].y=canvasAllLevel1[c1-4].y+canvasAllLevel1[c1-4].height+40;
    			   for(var c2=0;c2<canvasAllLevel2.length;c2++){
        			   if(canvasAllLevel2[c2].cpu.boardId==canvasAllLevel1[c1].id){
        				   canvasAllLevel2[c2].y=canvasAllLevel1[c1].y+canvasAllLevel2[c2].y_;
        			   }
        		   }
    		   }
    		  
    	   }
    	   if(index%4==1 && canvasAllLevel1[index+3]!=null){
    		   for(var c1=index+3;c1<canvasAllLevel1.length;c1++){
    			   if(myCount % 2 == 0){
        			   canvasAllLevel1[c1].y+=60;
    			   }
    			  // canvasAllLevel1[c1].y=canvasAllLevel1[c1-4].y+canvasAllLevel1[c1-4].height+40;
    			   for(var c2=0;c2<canvasAllLevel2.length;c2++){
        			   if(canvasAllLevel2[c2].cpu.boardId==canvasAllLevel1[c1].id){
        				   canvasAllLevel2[c2].y=canvasAllLevel1[c1].y+canvasAllLevel2[c2].y_;
        			   }
        		   }
    		   }
    		  
    	   }
    	   if(index%4==0 && canvasAllLevel1[index+4]!=null){
    		   for(var c1=index+4;c1<canvasAllLevel1.length;c1++){
    			   if(myCount % 2 == 0){
        			   canvasAllLevel1[c1].y+=60;
    			   }
    			  // canvasAllLevel1[c1].y=canvasAllLevel1[c1-4].y+canvasAllLevel1[c1-4].height+40;
    			   for(var c2=0;c2<canvasAllLevel2.length;c2++){
        			   if(canvasAllLevel2[c2].cpu.boardId==canvasAllLevel1[c1].id){
        				   canvasAllLevel2[c2].y=canvasAllLevel1[c1].y+canvasAllLevel2[c2].y_;
        			   }
        		   }
    		   }
    		  
    	   }
       }
}
/**
 *	新增一个三级元素
 */
function addCanvasLevel3(index ,pIndex, funs){
    var canvasAllLevel3Obj = {};

    canvasAllLevel3Obj.ppIndex = pIndex;
    canvasAllLevel3Obj.width = 30;
    canvasAllLevel3Obj.height = 30;
    canvasAllLevel3Obj.img = './images/topology/ppc.png';

    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var obj = canvasAllLevel2[i];
        if(obj.index == index && obj.ppIndex == pIndex){
            index = i;
        }
    }
    canvasAllLevel3Obj.pIndex = index;
    //	板卡-处理单元 一排两个 最多四个
    var myCount = 0;
    for(var i = 0 ; i < canvasAllLevel3.length ; i++){
        var canvasLevel3 = canvasAllLevel3[i];
        if(canvasLevel3.pIndex == index&& canvasLevel3.ppIndex == pIndex){
            //记录我这个主机的这个板卡下有多少个处理单元
            myCount++;
        }
    }
    if(myCount >= 4){
        //一个板卡中最多有四个处理单元
        alert('一个板卡最多四个处理单元');
        drawCircles();
        return;
    }else{
        canvasAllLevel2[index].count = myCount+1;
        //在我这个板卡中 有四个位置 看看是在哪个区域内
        if(myCount == 0){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 15
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 10
        }else if(myCount == 1){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 55
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 10
        }else if(myCount == 2){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 15
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 45
        }else if(myCount == 3){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 55
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 45
        }
    }
    canvasAllLevel3.push(canvasAllLevel3Obj);
    //回调函数
    drawCircles();
}


/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place , count ,  ctx){
    var xDiff = obj1Place.x - obj2Place.x;
    var yDiff = obj1Place.y - obj2Place.y;
    xDiff = Math.abs(xDiff);//x差绝对值
    yDiff = Math.abs(yDiff);//y差绝对值
    var line1End = {};//第一条线的结束点
    var line2Start = {};//第二条线的开始点
    var textPlace = {};
    //分为四种情况
    if(obj1Place.x >= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x >= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }

    ctx.setLineDash([15,5])
    ctx.fillStyle='black';
    //设置对象起始点和终点
    ctx.moveTo(obj1Place.x,obj1Place.y);
    ctx.lineTo(line1End.x,line1End.y);
    ctx.fillText(count, textPlace.x, textPlace.y)
    //设置样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#F5270B";
    //绘制
    ctx.stroke();
    ctx.moveTo(line2Start.x,line2Start.y);
    ctx.lineTo(obj2Place.x,obj2Place.y);
    ctx.stroke();
}

/**
 *	十字连线的时候的方法
 */
function DrawLine2(obj , ctx){
    ctx.setLineDash([5,5])
    ctx.fillStyle='black';
    //设置对象起始点和终点
    ctx.moveTo(obj.startx,obj.starty);
    ctx.lineTo(obj.endx,obj.endy);
    //设置样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#F5270B";
    //绘制
    ctx.stroke();
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel(obj1 , obj2 , count , funs){
    var isLine = true;
    var lineIndex = -1;
    for(var i = 0 ; i < lineObjs.length ; i++){
        var lineObj = lineObjs[i];
        if(lineObj.obj1.x == obj1.x && lineObj.obj1.y == obj1.y && lineObj.obj2.x == obj2.x && lineObj.obj2.y == obj2.y ){
            //已经连线过 删除这条线 A连B 和 B连A 都要取消
            lineIndex = i;
            break;
        }else if(lineObj.obj1.x == obj2.x && lineObj.obj1.y == obj2.y && lineObj.obj2.x == obj1.x && lineObj.obj2.y == obj1.y){
            lineIndex = i;
            break;
        }
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2 , count:count});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 , count:lineObj.count};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 */
function doLine(obj1 , obj2 ,count , funs){
   
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place , count ,funs);
}

/**
 *	画线  重置点击 拖拽事件
 */
function setDrawLine(cursorstyle, fun1 , fun2 , obj) {
    var clicktype = obj.attr('clicktype');
    if(clicktype == "1"){
        //想要连线
        obj.attr('clicktype','2');
        if (document.getElementById('myCanvas').style) {
            document.getElementById('myCanvas').style.cursor=cursorstyle;
        }
        var funObj = {fun1:fun1,fun2:fun2};
        $(canvas).unbind('mousedown').bind('mousedown', canvasLineClick);
        $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseLineDragging);
        $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseLineDragging);
        $(canvas).unbind('mousemove').bind('mousemove' , dragLineCircle);
    }else{
        //点完连线后不想连线了
        cancelDrawLine();

    }
}

/**
 *	连上线了之后 重置拖拽事件
 */
function cancelDrawLine(){
    if (document.getElementById('myCanvas').style) {
        document.getElementById('myCanvas').style.cursor='pointer';
    }
    var funObj = {fun1:canvasInitData.fun1,fun2:canvasInitData.fun2};
    $(canvas).unbind('mousedown').bind('mousedown', canvasClick);
    $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseDragging);
    $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseDragging);
    $(canvas).unbind('mousemove').bind('mousemove' , dragCircle);
}

/**
 *	画线的时候 点击画布 查找有无选中的对象
 *
 */
function canvasLineClick(e) {
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320-320;
    var clickY = e.pageY - canvas.offsetTop-70 + table_box_scroll_top;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleStartLine = circle;
            initDomPlace(canvasAllLevel3,i);
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){

    }else{
        previousSelectedCircleStartLine = null;
        alert("未选中一个对象!");
    }
}
/**
 *	画线的时候 松开鼠标的时候看看有没有元素选中 有的话 连线
 */
function outMouseLineDragging(e){
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70+table_box_scroll_top;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < oldCircles.length; i++) {
        var circle = oldCircles[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleEndLine = circle;
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){
        //放开鼠标的时候 也有元素 让这两个元素 连线
        doLine(previousSelectedCircleStartLine , previousSelectedCircleEndLine , 0 ,e.data);
        previousSelectedCircleStartLine = null;
        drawLineObj = {};
        drawCircles();
        cancelDrawLine();
    }else{
        if(previousSelectedCircleStartLine != null){
            previousSelectedCircleStartLine = null;
            drawLineObj = {};
            drawCircles();
            alert("未选中一个对象!");
        }
    }
}
var drawLineObj = {};
/**
 *	画线
 */
function dragLineCircle(e){
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-70 +  table_box_scroll_top;
    // 判断拖拽对象是否存在
    if (previousSelectedCircleStartLine != null) {
        // 	取得鼠标位置
        var x = e.pageX - canvas.offsetLeft-320;
        var y = e.pageY - canvas.offsetTop-70 +  table_box_scroll_top;
        //	画一条线 起点是选中元素的中心 终点是鼠标的位置
        drawLineObj.startx = previousSelectedCircleStartLine.x + previousSelectedCircleStartLine.width/2;
        drawLineObj.starty = previousSelectedCircleStartLine.y + previousSelectedCircleStartLine.height/2;
        drawLineObj.endx = clickX;
        drawLineObj.endy = clickY;

        // 更新画布
        drawCircles();
    }
}

/**
 *	一级元素位置发生变动时 重画这个元素下的二级元素
 */
function updateCanvasLevel2Obj(obj){
	moveAllObjs.level2Objs = [];
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var level2Obj = canvasAllLevel2[i];
        var myCount = level2Obj.index;
        if(obj.index == level2Obj.pIndex){
            //是这个一级元素下的二级 重绘位置
            //在我这个板卡中 有四个位置 看看是在哪个区域内
        	if(myCount % 2 == 0){
                //另起一排 增加本主机的高度
                //canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
        		level2Obj.y = obj.y + 60 + 80*(myCount / 2);
        		level2Obj.x = obj.x + 30;
            }else{
            	level2Obj.y = obj.y + 60 + 80*((myCount -( myCount%2)) / 2);
            	level2Obj.x = obj.x + 30 + 88*(myCount%2);
            }
            moveAllObjs.level2Objs.push(level2Obj);
        }
    }
}

/**
 *	增加选中的边框的方法
 */
function addCanvasAllLevelObj(obj , index , level){
    cancelChoose();
    var newObj = {};
    newObj.x = obj.x;
    newObj.y = obj.y;
    newObj.width = obj.width;
    newObj.height = obj.height;
    newObj.level = level;
    newObj.index = index;
	newObj.color='#009EE7';

    var param = obj.cpu;
    if(level==1){
    	var board=obj.board;
    	obj.color='#009EE7';
    	if(board){
	    	$("#boardId2").val(board.boardId);
	        $("#boardName2").val(board.boardName);
	        $("#boardType2").val(board.boardType);
	        $("#bottom3").show();
	        $("#bottom1").hide();
	        $(".table-box").css({"bottom":"100px"});
    	}
    }
    if(level==2){
    	var cpu=obj.cpu;
    	obj.color='#009EE7';
    	if(cpu){
    		$("#cpuSerial2").val(cpu.cpuSerial)
    		$("#cpuId2").val(cpu.cpuId)
    		$("#cpuType2").val(cpu.cpuType)
	        $("#bottom1").show();
    		$("#bottom3").hide();
	        $(".table-box").css({"bottom":"100px"}); 
    	}
    }
   
    canvasAllLevelObj.push(newObj);
}
/**
 *	取消选中的颜色
 */
function cancelChoose(){
    /*for(var i = 0 ; i < canvasAllLevelObj.length ; i++){
        var obj = canvasAllLevelObj[i];
    if(obj.level==2){
            canvasAllLevel2[obj.index].color = "#ffffff";
        }
    }*/
    canvasAllLevelObj = [];
}